<template>
  <div class="articleRank" ref="rank">
    <!-- 每日一句 -->
    <div class="weathers">
      <div class="cardm">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="路漫漫其修远兮，吾将上下而求索。"
          placement="right"
        >
          <div class="card">
            <div class="day">每日一句</div>

            <div class="main">
              Although the road is endless and faraway, l still want to pursue
              the truth in the worl.
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <!-- 文章榜 -->
    <div class="article-rank" v-if="articleRankData.length > 0">
      <div class="title">
        <svg
          t="1704351299999"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6711"
          width="20"
          height="20"
        >
          <path
            d="M114.2784 979.456a43.7248 43.7248 0 0 1 43.6224-43.7248h704.8192a43.7248 43.7248 0 0 1 0 87.3472H157.9008a43.6224 43.6224 0 0 1-43.6224-43.6224z"
            fill="#C2E3FF"
            opacity=".64"
            p-id="6712"
          ></path>
          <path
            d="M1005.1584 414.3104a43.9296 43.9296 0 0 0-2.8672-34.9184 8.0896 8.0896 0 0 0 0-0.9216 44.032 44.032 0 0 0-30.72-22.3232 43.6224 43.6224 0 0 0-39.424 13.6192l-169.984 120.5248L545.5872 247.808a61.44 61.44 0 0 0-4.608-4.4032 43.52 43.52 0 0 0-61.44 3.4816L260.7104 491.52 89.2928 369.2544a43.52 43.52 0 0 0-74.4448 22.3232 42.0864 42.0864 0 0 0 0.9216 20.48l92.16 424.6528a42.8032 42.8032 0 0 0 3.584 15.872 43.52 43.52 0 0 0 47.8208 27.136 35.1232 35.1232 0 0 0 4.5056-0.9216h704.7168a43.7248 43.7248 0 0 0 34.816-17.1008 44.6464 44.6464 0 0 0 9.1136-20.48l92.16-427.3152z"
            fill="#43ADFF"
            p-id="6713"
          ></path>
          <path
            d="M510.2592 8.0896a133.12 133.12 0 1 0 133.12 133.12 133.12 133.12 0 0 0-133.12-133.12z"
            fill="#43ADFF"
            p-id="6714"
          ></path>
        </svg>
        <p>文章榜</p>
      </div>
      <el-divider style="margin: 0; padding: 0" />
      <ul class="infinite-list" style="overflow: auto" @scroll="handleScroll">
        <li
          v-for="(item, index) in articleRankData"
          :key="item.articleId"
          class="infinite-list-item"
          @click="toDetail(item.articleId)"
        >
          <div
            :class="
              index == 0
                ? 'fist-item'
                : index == 1
                ? 'second-item '
                : index == 2
                ? 'thrid-item'
                : 'body-item'
            "
          >
            {{ index + 1 }}
          </div>
          <div class="item-text">
            {{ item.title }}
          </div>
        </li>
      </ul>
      <el-divider style="margin: 0; padding: 0" />
      <div class="more">
        <div class="load" v-if="isLoadByArticle">
          <div class="three-body">
            <div class="three-body__dot"></div>
            <div class="three-body__dot"></div>
            <div class="three-body__dot"></div>
          </div>
        </div>
        <p v-else>{{ isLoadByArticle ? "加载中" : hideVal }}</p>
      </div>
    </div>
    <!-- 作者榜 -->
    <div class="author-rank" v-if="authorRankData.length > 0">
      <div class="title">
        <svg
          t="1704352994267"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10630"
          width="22"
          height="22"
        >
          <path
            d="M478.7 535.4c154.6 33.8 295.7-10.9 315-99.8 11.4-52.1-34.3-42.5-106.4-32.3l23.2-106.2c14.7-67.4-28.2-134.3-95.6-149l-98.6-21.5c-8.8-1.9-17.7-2.9-26.6-2.9-58.5 0-109.9 41.4-122.4 98.5L344 328.7c-60-38.7-99-66.6-110.1-15.3-19.4 88.8 90.2 188.2 244.8 222zM825.9 825.1c-34.4-96.2-109.5-171-204.4-205.4 15.5-13.3 28.6-29.3 38.7-47-24.7 4.8-51.4 7.5-79.9 7.5-35.6 0-72.2-4-108.8-12-53.7-11.7-102-30.7-142.6-54.4 6.9 41.2 27.8 78.8 59.4 106-95.2 34.4-170.4 109.5-204.6 206.2-5.4 15.3-3 32.4 6.4 45.7 9.4 13.3 24.8 21.2 41 21.2h0.1l547.4-0.8c16.3 0 31.7-8 41-21.4 9.4-13.3 11.7-30.3 6.3-45.6z m-321.1 51.2l-39.2-44.4 22.9-164c-5.3-4.6-8.8-11.3-8.8-18.9 0-13.9 11.2-25.1 25.1-25.1 13.9 0 25.1 11.2 25.1 25.1 0 7.6-3.5 14.3-8.8 18.9l22.9 164-39.2 44.4z"
            p-id="10631"
            fill="#0da5f5"
          ></path>
        </svg>
        <p>作者榜</p>
      </div>
      <el-divider style="margin: 0; padding: 0" />
      <ul class="author-rank-list">
        <li class="author-item" v-for="item in authorRankData" :key="item.id">
          <el-avatar :src="item.avatar" class="avatar" />
          <div class="author-info">
            <div class="author-name">{{ item.nickName }}</div>
            <div class="author-desc">{{ item.introduce }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import time from "@/utils/time";
import { ref } from "vue";
import { reqQueryArticleRank, reqQueryAuthorRank } from "@/api/article";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore();

const $router = useRouter();

// 文章榜单是否处于加载中
const isLoadByArticle = ref(false);

// 文章提示信息
const hideVal = ref("下拉加载更多");

// 文章榜单数量
const entity = ref({
  page: 1,
  pageSize: 5,
});

// 文章榜单
const articleRankData = ref([]);

// 作者榜单
const authorRankData = ref([]);

// 检测是否触底 触底加载数据
const handleScroll = () => {
  if (hideVal.value == "到底啦...") {
    return;
  }

  const dialog = event.target;
  if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
    // 如果目前处于获取数据的状态，则不允许继续发请求，防止数据重复
    if (isLoadByArticle.value) {
      return;
    }
    entity.value.page += 1;
    isLoadByArticle.value = true;
    setTimeout(async () => {
      await reqQueryArticleRank(entity.value).then((res) => {
        if (res.data.result.length == 0) {
          hideVal.value = "到底啦...";
          return;
        }

        articleRankData.value.push(...res.data.result);
      });
      isLoadByArticle.value = false;
    }, 1000);
  }
};

const init = () => {
  getArticleRank();
  getAuthorRank();
  // getWeather();
};

// 获取文章榜单
const getArticleRank = () => {
  reqQueryArticleRank(entity.value).then((res) => {
    articleRankData.value = res.data.result;
  });
};

// 获取作者榜单
const getAuthorRank = () => {
  reqQueryAuthorRank().then((res) => {
    authorRankData.value = res.data;
  });
};

// // 获取天气状况 --- 增城区
// const getWeather = () => {
//   request
//     .get("http://t.weather.sojson.com/api/weather/city/101280104")
//     .then((res) => {
//       console.log(res);
//     });
// };

// 跳转至详情页
const toDetail = (id) => {
  console.log(id);
  $router.push({
    query: {
      id,
    },
    path: "/article-detail",
  });
  if (userStore.userName) {
    reqAddView(id);
  }
};

init();
</script>

<style scoped lang="scss">
.articleRank {
  width: 100%;
  // .sign-in {
  //   width: 100%;
  //   padding: 10px;
  //   box-sizing: border-box;
  //   background-color: #ffffff;
  //   border-radius: 4px;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-around;
  //   height: 80px;
  //   .sign-desc {
  //     p {
  //       margin: 5px 0;
  //     }
  //     :first-child {
  //       font-weight: 600;
  //     }
  //     :last-child {
  //       color: #7b7b7b;
  //       font-size: 12px;
  //     }
  //   }
  // }
  .weathers {
    width: 100%;
    .cardm {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
    }

    .card {
      // width: 250px;
      width: 100%;
      height: 130px;
      border-radius: 25px;
      background: rgb(245, 243, 243);
      color: black;
      z-index: 2;
      transition: 0.4s ease-in-out;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #cccccc97;
      .day {
        font-size: 1.4em;
        text-align: center;
      }
      .main {
        font-size: 14px;
        display: -webkit-box;
        color: #686868;
        overflow: hidden;
        margin-top: 10px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 指定显示的行数 */
        text-overflow: ellipsis;
        word-break: break-all;
        text-indent: 1em;
      }
    }
    .card:hover {
      background-color: #ffe87c;
      cursor: pointer;
    }
  }
  .article-rank {
    width: 100%;
    height: 350px;
    background-color: #ffffff;
    margin-top: 20px;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    .title {
      width: 100%;
      height: 17%;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 10px;
      }
    }
    .infinite-list {
      height: 67%;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .infinite-list .infinite-list-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 25px;
      margin: 11px 0;
      color: #414141;
      font-size: 14px;
      padding: 5px;
      .fist-item {
        background: linear-gradient(
          180deg,
          #f64242 20%,
          rgba(246, 66, 66, 0.4) 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 800;
        margin: 0 0.92rem 0 0;
      }
      .second-item {
        font-weight: 800;
        background: linear-gradient(
          180deg,
          #ff7426 20%,
          rgba(255, 116, 38, 0.4) 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 0 0.92rem 0 0;
      }
      .thrid-item {
        font-weight: 800;
        background: linear-gradient(
          180deg,
          #ffac0c 20%,
          rgba(255, 172, 12, 0.4) 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 0 0.92rem 0 0;
      }
      .body-item {
        font-weight: 800;
        margin: 0 0.92rem 0 0;
        color: #8a919f;
        font-family: Archivo;
        text-align: left;
      }
      .item-text {
        display: inline-block;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #515152;
      }
    }
    .more {
      height: 15%;
      color: #7b7b7b;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      cursor: pointer;
    }
  }
  .author-rank {
    width: 100%;
    background-color: #ffffff;
    margin-top: 20px;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 7px;
      }
    }
    .author-rank-list {
      width: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      .author-item {
        width: 100%;
        margin: 10px 0;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .author-info {
          height: 40px;
          width: 75%;
          color: #343434;
          margin-left: 10px;
          .author-name {
            width: 100%;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .author-desc {
            width: 100%;
            font-size: 12px;
            color: #6b6b6b;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
      .author-item:hover {
        background-color: #8a919f0f;
        cursor: pointer;
        border-radius: 4px;
      }
    }
  }
}

.infinite-list-item:hover {
  background-color: #d3d3d32e;
  cursor: pointer;
  border-radius: 4px;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

::-webkit-scrollbar {
  width: 12px; /* 竖向滚动条宽度 */
  height: 13px; /* 横向滚动条宽度 */
}

// 加载动画
.three-body {
  --uib-size: 35px;
  --uib-speed: 0.8s;
  --uib-color: #5d3fd3;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}

.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
}

.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
    ease-in-out;
}

.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}
</style>